<template>
	<view class="page-content">
		<view class="page-top" v-if="dataobj.identity_init===2">
			<view class="page-top-tit">当前绑定身份证号码</view>
			<view class="page-top-num">{{dataobj.identity}}</view>
		</view>
		<view class="page-body">

			<!--输入框-->
			<view class="input-box">
				<view class="input-row" v-if="dataobj.identity_init===1">
					<view class="icon-size icons icon-credentials_icon"></view>
					<input class="input-pho" type="string" placeholder-style="color:#ddd" v-model="params.identity"
						placeholder="请输入新的身份证号码" :focus="true"></input>
				</view>
				<!-- 手机 -->
				<view class="input-row" v-if="dataobj.identity_init===2">
					<view class="icon-size icons icon-credentials_icon"></view>
					<input class="input-pho" type="string" placeholder-style="color:#ddd" v-model="params.identity"
						placeholder="请输入身份证号码" :focus="true"></input>
				</view>
				<!-- -- 验证码 --
				<view class="input-row-code">
					<view class="input-row-code-l">
						<view class="icon-size icons icon-yanzhengma"></view>
						<input class="input-code" type="number" placeholder-style="color:#ddd" clearable
							v-model="params.code" placeholder="请输入验证码" :maxLength="4"></input>
					</view>
					<view class="input-row-code-r">
						<button class="send-code" size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
					</view>
				</view> -->
			</view>
		</view>
		<view class="page-foot-button" @tap="confirm(params)">
			<view class="button">确 认</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import {
		getuserinfos, //获取用户信息
		sendsmss, //获取短信验证码
		bindUserIdentitys,  //绑定或更换绑定身份证号
	} from '@/common/api.js'
	export default {
		components: {

		},
		data() {
			return {
				dataobj: {
					identity: '',
					identity_init:''
				},
				params: {
					identity: ''
				},
				btnDis: false,
				btnText: "获取验证码",
				userInfos: {
					user_name: '',
					province: '',
					city: '',
					country: '',
					headimgurl: '',
					openid: '',
					session_key: '',
					identity: ''
				}
			}
		},
		computed: {
			...mapState(['hasLogin', 'openid', 'token', 'agent_id', 'userInfo'])
		},
		onShow() {
			this.getdata();
			this.userInfos = this.userInfo;
		},
		methods: {
			...mapMutations(['setLogin', 'setloginStatus', 'setUserInfo', 'login', 'loginOut']),
			//获取info信息
			getdata() {
				getuserinfos().then(res => {
					console.log(999, res)
					if (res.code === 2000) {
						this.dataobj.identity = res.data.identity
						this.dataobj.identity_init = res.data.identity_init
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						});
					}
				})
			},
			//登录
			confirm(row) {
				console.log(222, row)
				let _self = this;
				if (row.identity === "") {
					uni.showToast({
						title: '请输入身份证号码！',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				bindUserIdentitys(row).then(res => {
					if (res.code === 2000) {
						//设置缓存
						_self.userInfos.identity = row.identity
						uni.setStorageSync('userInfo', _self.userInfos);
						//_self.userInfo.identity = row.identity;
						//跳转页面
						uni.reLaunch({
							url: `/pages/user/index`
						})
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						});
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						});
					}
				})
			},
			// 发送验证码
			sendCode() {
				let resData = this.params
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(resData.mobile)) {
					uni.showToast({
						title: '请输入您的手机号',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				//请求接口
				sendsmss({
					mobile: this.params.mobile
				}).then(res => {
					console.log(123, res)
					if (res.code === 2000) {
						uni.showToast({
							title: '发送成功！',
							duration: 2000,
							icon: "none"
						});
						// 开启倒计时
						this.countDown();

					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						});
					}
				})
			},

			// 验证码倒计时
			countDown() {
				let t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(t);
				this.btnText = `${timer}s`;
				t = setInterval(() => {
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.icon-size{
		font-size: 40rpx;
		color: #777;
	}
	.page-foot-button {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		background: #02BB6F;

		.button {
			font-size: 32rpx;
			color: #fff;
		}
	}

	.input-box {
		display: flex;
		flex-direction: column;
		margin: 40rpx 30rpx 30rpx 30rpx;

		.input-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100rpx;
			background: #fff;
			margin-bottom: 30rpx;
			border-radius: 8rpx;
			line-height: 100rpx;
			padding: 0rpx 30rpx;

			.input-pho {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #666;
				padding-left: 20rpx;
			}
		}

		.input-row-code {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100rpx;
			background: #fff;
			margin-bottom: 80rpx;
			border-radius: 8rpx;
			line-height: 100rpx;
			padding: 0rpx 30rpx;

			.input-row-code-l {
				flex: 65;
				display: flex;
				margin-right: 10rpx;

				.input-code {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #666;
					padding-left: 20rpx;

				}
			}

			.input-row-code-r {
				flex: 35;
				display: flex;
				border-radius: 8rpx;
				justify-content: center;
				align-items: center;

				.send-code {
					flex: 1;
					height: 94rpx;
					line-height: 96rpx;
					font-weight: 400;
					background: #fff;
					border: none;
					font-size: 28rpx;
					color: #02BB6F;
				}

				.send-code:after {
					border: none;
				}
			}
		}
	}

	.page-content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;

		.page-body {
			display: flex;
			flex-direction: column;
		}

		.page-top {
			margin: 110rpx 0 60rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.page-top-tit {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 25rpx;
			}

			.page-top-num {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>
